<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-caret-right"></i> 订单</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <el-tabs type="border-card" class="box-card2">
      <el-tab-pane label="待付款">
        <el-table :data="tableData0" border style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="80" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" width="140" align="center"></el-table-column>
          <el-table-column prop="money" label="单价" width="80" align="center"></el-table-column>
          <el-table-column prop="num" label="数量" width="80" align="center"></el-table-column>
          <el-table-column prop="sumMoney" label="实付款" width="80" align="center"></el-table-column>
          <el-table-column prop="state" label="交易状态" width="145" align="center">未支付</el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button type="danger" @click="cancel(scope.row)">取消订单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待发货">
        <el-table :data="tableData1" border style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="80" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" width="140" align="center"></el-table-column>
          <el-table-column prop="money" label="单价" width="80" align="center"></el-table-column>
          <el-table-column prop="num" label="数量" width="80" align="center"></el-table-column>
          <el-table-column prop="sumMoney" label="实付款" width="80" align="center"></el-table-column>
          <el-table-column prop="state" label="交易状态" width="145" align="center">待发货</el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button type="danger" @click="cancel(scope.row)">取消订单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待收货">
          <el-table :data="tableData2" border style="width: 100%">
            <el-table-column prop="id" label="订单编号" width="80" align="center"></el-table-column>
            <el-table-column prop="goodsName" label="商品名称" width="140" align="center"></el-table-column>
            <el-table-column prop="money" label="单价" width="80" align="center"></el-table-column>
            <el-table-column prop="num" label="数量" width="80" align="center"></el-table-column>
            <el-table-column prop="sumMoney" label="实付款" width="80" align="center"></el-table-column>
            <el-table-column prop="state" label="交易状态" width="145" align="center">待收货</el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button type="primary" @click="confirm(scope.row)">确定收货</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-tab-pane>
      <el-tab-pane label="历史订单">
        <el-table :data="tableData3" border style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="80" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" width="140" align="center"></el-table-column>
          <el-table-column prop="money" label="单价" width="80" align="center"></el-table-column>
          <el-table-column prop="num" label="数量" width="80" align="center"></el-table-column>
          <el-table-column prop="sumMoney" label="实付款" width="80" align="center"></el-table-column>
          <el-table-column prop="state" label="交易状态" width="145" align="center">已收货</el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button style="width: 70px;padding-left: 13px" type="primary" @click="toEvaluate(scope.row.gid)">去评论</el-button>
              <el-button style="float: right" type="primary" @click="openDelete(scope.row)">删除订单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      tableData0: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      }
  },
  methods: {
    confirm(order){
      let url = 'http://localhost:8080/order/confirm/'+order.oid;
      console.log(url);
      this.axios.post(url).then((response)=>{
        let responseBody=response.data;
        if(responseBody.state==20000){
          this.listStateIs2();
          this.$message({
            type: 'success',
            message: '确认收货成功'
          });
          this.listStateIs2();
        }else {
          this.$message({
            type: 'info',
            message: responseBody.message
          });
          this.listStateIs2();
        }
      })
    },
    toEvaluate(id){
      console.log("id"+id)
      location.href="/deil?id="+id;
    },
    cancel(order){
      let message = '是否取消订单';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delete(order);
      }).catch(() => {

      });
    },
    openDelete(order){
      let message = '此操作将永久删除【'+order.id+'】,是否继续';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delete(order);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除取消'
        });
      });
    },
    delete(order){
      let url = 'http://localhost:8080/order/delete/'+order.id;
      console.log(url);
      this.axios.post(url).then((response)=>{
        let responseBody=response.data;
        if(responseBody.state==20000){
          this.listStateIs0();
          this.listStateIs1();
          this.listStateIs3();
          this.$message({
            type: 'success',
            message: '成功'
          });
          this.listStateIs0();
          this.listStateIs1();
          this.listStateIs3();
        }else {
          this.$message({
            type: 'info',
            message: responseBody.message
          });
          this.listStateIs0();
          this.listStateIs1();
          this.listStateIs3();
        }
      })
    },
    //查未支付订单
    listStateIs0(){
      let url = "http://localhost:8080/order/listState0";
      axios.get(url).then((response)=>{
        this.tableData0=response.data.data;
      })
    },
    //查待发货订单
    listStateIs1(){
      let url = "http://localhost:8080/order/listState1";
      axios.get(url).then((response)=>{
        this.tableData1=response.data.data;
      })
    },
    //查已发货订单
    listStateIs2(){
      let url = "http://localhost:8080/order/listState2";
      axios.get(url).then((response)=>{
        this.tableData2=response.data.data;
      })
    },
    //查已收货订单
    listStateIs3(){
      let url = "http://localhost:8080/order/listState3";
      axios.get(url).then((response)=>{
        this.tableData3=response.data.data;
      })
    },
  },
  mounted() {
    this.listStateIs0();
    this.listStateIs1();
    this.listStateIs2();
    this.listStateIs3();
  }
}
</script>

<style scoped>
.box-card2{
  background-color: rgba(234, 227, 184, 0.13);
}
</style>